html,body {
  font-family: "微软雅黑";
  height: 100%;
}
.container {
  width: 100%;
  position: fixed;
  bottom: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.unstyle {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.unstyle > li {
  margin: 5px 5px 0 5px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 10px;
  color: gray;
}
.unstyle > li > img {
  width: 40%;
}
.active {
  color: #32c27c;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .1s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
.slide-enter-active, .slide-enter  {
  animation: show .3s
}
.slide-leave-active, .slide-leave-to {
  animation: hide .3s;
}



@keyframes show
{
  0%   {left:-100%;}
  100% {left:0;}
}

@-moz-keyframes show /* Firefox */
{
  0%   {left:-100%;}
  100% {left:0;}
}

@-webkit-keyframes show /* Safari 和 Chrome */
{
  0%   {left:-100%;}
  100% {left:0;}
}

@-o-keyframes show /* Opera */
{
  0%   {left:-100%;}
  100% {left:0;}
}

@keyframes hide
{
  0%   {left:0;}
  100% {left:-100%;}
}

@-moz-keyframes hide /* Firefox */
{
  0%   {left:0;}
  100% {left:-100%;}
}

@-webkit-keyframes hide /* Safari 和 Chrome */
{
  0%   {left:0;}
  100% {left:-100%;}
}

@-o-keyframes hide /* Opera */
{
  0%   {left:0;}
  100% {left:-100%;}
}

















.info-img {
  display: inline-block;
}
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.info-contariner {
  /*margin: 40px 0;*/
  overflow: hidden;
  width: 100%;
  flex: 1;
}
.footer {
  background: whitesmoke;
  z-index: 999;
}
#img-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -32px;
}
